<template>
  <div class="attributes-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>商品属性管理</h3>
          <el-button type="primary" @click="handleAddGroup">
            <el-icon><Plus /></el-icon>
            新增属性组
          </el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="属性组管理" name="group">
          <el-table :data="attributeGroups" stripe>
            <el-table-column prop="name" label="属性组名称" width="200" />
            <el-table-column prop="code" label="属性组编码" width="150" />
            <el-table-column prop="attributeCount" label="属性数量" width="100" />
            <el-table-column prop="applicableCategories" label="适用分类" min-width="200" />
            <el-table-column prop="sort" label="排序" width="80" />
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button type="primary" size="small" text @click="handleManageAttributes(row)">
                  管理属性
                </el-button>
                <el-button type="warning" size="small" text @click="handleEditGroup(row)">
                  编辑
                </el-button>
                <el-button type="danger" size="small" text @click="handleDeleteGroup(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="属性列表" name="attribute">
          <div class="toolbar">
            <el-select v-model="selectedGroup" placeholder="选择属性组" style="width: 200px">
              <el-option
                v-for="group in attributeGroups"
                :key="group.id"
                :label="group.name"
                :value="group.id"
              />
            </el-select>
            <el-button type="primary" @click="handleAddAttribute">
              <el-icon><Plus /></el-icon>
              新增属性
            </el-button>
          </div>

          <el-table :data="filteredAttributes" stripe style="margin-top: 20px">
            <el-table-column prop="name" label="属性名称" width="150" />
            <el-table-column prop="code" label="属性编码" width="150" />
            <el-table-column prop="type" label="属性类型" width="120">
              <template #default="{ row }">
                <el-tag>{{ row.type }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="values" label="可选值" min-width="200">
              <template #default="{ row }">
                <el-tag
                  v-for="(value, index) in row.values"
                  :key="index"
                  size="small"
                  style="margin-right: 5px"
                >
                  {{ value }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="required" label="是否必填" width="100">
              <template #default="{ row }">
                <el-tag :type="row.required ? 'danger' : 'info'">
                  {{ row.required ? '必填' : '选填' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="{ row }">
                <el-button type="warning" size="small" text @click="handleEditAttribute(row)">
                  编辑
                </el-button>
                <el-button type="danger" size="small" text @click="handleDeleteAttribute(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 属性组对话框 -->
    <el-dialog v-model="groupDialogVisible" title="属性组" width="500px">
      <el-form :model="groupForm" label-width="100px">
        <el-form-item label="属性组名称">
          <el-input v-model="groupForm.name" placeholder="如：手机参数" />
        </el-form-item>
        <el-form-item label="属性组编码">
          <el-input v-model="groupForm.code" placeholder="如：phone_spec" />
        </el-form-item>
        <el-form-item label="适用分类">
          <el-select v-model="groupForm.applicableCategories" multiple placeholder="请选择" style="width: 100%">
            <el-option label="电子产品" value="电子产品" />
            <el-option label="服装鞋帽" value="服装鞋帽" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="groupForm.sort" :min="0" style="width: 100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="groupDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveGroup">确定</el-button>
      </template>
    </el-dialog>

    <!-- 属性对话框 -->
    <el-dialog v-model="attributeDialogVisible" title="属性" width="600px">
      <el-form :model="attributeForm" label-width="100px">
        <el-form-item label="属性名称">
          <el-input v-model="attributeForm.name" placeholder="如：颜色" />
        </el-form-item>
        <el-form-item label="属性编码">
          <el-input v-model="attributeForm.code" placeholder="如：color" />
        </el-form-item>
        <el-form-item label="属性类型">
          <el-select v-model="attributeForm.type" placeholder="请选择" style="width: 100%">
            <el-option label="下拉选择" value="select" />
            <el-option label="输入框" value="input" />
            <el-option label="多选" value="checkbox" />
            <el-option label="单选" value="radio" />
          </el-select>
        </el-form-item>
        <el-form-item label="可选值" v-if="['select', 'checkbox', 'radio'].includes(attributeForm.type)">
          <el-tag
            v-for="(value, index) in attributeForm.values"
            :key="index"
            closable
            @close="handleRemoveValue(index)"
            style="margin-right: 10px"
          >
            {{ value }}
          </el-tag>
          <el-input
            v-model="newValue"
            placeholder="输入值后回车添加"
            style="width: 200px"
            @keyup.enter="handleAddValue"
          />
        </el-form-item>
        <el-form-item label="是否必填">
          <el-switch v-model="attributeForm.required" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="attributeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveAttribute">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const activeTab = ref('group')
const groupDialogVisible = ref(false)
const attributeDialogVisible = ref(false)
const selectedGroup = ref(null)
const newValue = ref('')

const attributeGroups = ref([
  {
    id: 1,
    name: '手机参数',
    code: 'phone_spec',
    attributeCount: 5,
    applicableCategories: '电子产品',
    sort: 1
  },
  {
    id: 2,
    name: '服装尺码',
    code: 'clothing_size',
    attributeCount: 3,
    applicableCategories: '服装鞋帽',
    sort: 2
  }
])

const attributes = ref([
  {
    id: 1,
    groupId: 1,
    name: '颜色',
    code: 'color',
    type: 'select',
    values: ['黑色', '白色', '金色'],
    required: true
  },
  {
    id: 2,
    groupId: 1,
    name: '存储容量',
    code: 'storage',
    type: 'select',
    values: ['64GB', '128GB', '256GB', '512GB'],
    required: true
  }
])

const groupForm = reactive({
  id: null,
  name: '',
  code: '',
  applicableCategories: [],
  sort: 0
})

const attributeForm = reactive({
  id: null,
  groupId: null,
  name: '',
  code: '',
  type: 'select',
  values: [],
  required: false
})

const filteredAttributes = computed(() => {
  if (!selectedGroup.value) return attributes.value
  return attributes.value.filter(attr => attr.groupId === selectedGroup.value)
})

const handleAddGroup = () => {
  Object.assign(groupForm, { id: null, name: '', code: '', applicableCategories: [], sort: 0 })
  groupDialogVisible.value = true
}

const handleEditGroup = (row) => {
  Object.assign(groupForm, { ...row })
  groupDialogVisible.value = true
}

const handleDeleteGroup = () => {
  ElMessage.success('删除成功')
}

const handleManageAttributes = (row) => {
  selectedGroup.value = row.id
  activeTab.value = 'attribute'
}

const handleSaveGroup = () => {
  ElMessage.success('保存成功')
  groupDialogVisible.value = false
}

const handleAddAttribute = () => {
  if (!selectedGroup.value) {
    ElMessage.warning('请先选择属性组')
    return
  }
  Object.assign(attributeForm, {
    id: null,
    groupId: selectedGroup.value,
    name: '',
    code: '',
    type: 'select',
    values: [],
    required: false
  })
  attributeDialogVisible.value = true
}

const handleEditAttribute = (row) => {
  Object.assign(attributeForm, { ...row, values: [...row.values] })
  attributeDialogVisible.value = true
}

const handleDeleteAttribute = () => {
  ElMessage.success('删除成功')
}

const handleSaveAttribute = () => {
  ElMessage.success('保存成功')
  attributeDialogVisible.value = false
}

const handleAddValue = () => {
  if (newValue.value.trim()) {
    attributeForm.values.push(newValue.value.trim())
    newValue.value = ''
  }
}

const handleRemoveValue = (index) => {
  attributeForm.values.splice(index, 1)
}
</script>

<style scoped>
.attributes-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
}

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
}
</style>

